import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { Button } from 'antd-mobile'
import BindWeChatVM from 'cvm/bindWeChat/bindWeChat'
import './bindWeChat.less'

const BindWeChatList = observer(({ vm }) => {
  return (
    <div>
      {
        (window.sessionStorage.getItem('viewBox') === 'true' && vm.cashType === 1) && <div className='bind-wechat'>
          <div className='title red-color'>您已绑定微信</div>
          <div className='tips'>
            <p>点击微信授权，即授权当前使用的微信</p>
            <p>授权后，提现资金会发放到您的微信领钱账户</p>
          </div>
          <div className='btn-box'>
            <Button type='primary' onClick={() => vm.handleWeChatJurisdiction()}>微信授权</Button>
          </div>
        </div>
      }
      {
        (window.sessionStorage.getItem('viewBox') === 'true' && vm.cashType !== 1) && <div className='bind-wechat'>
          <div className='title'>您尚未微信授权</div>
          <div className='tips'>
            <p>点击微信授权，即授权当前使用的微信</p>
            <p>授权后，提现资金会发放到您的微信领钱账户</p>
          </div>
          <div className='btn-box'>
            <Button type='primary' onClick={() => vm.handleWeChatJurisdiction()}>微信授权</Button>
          </div>
        </div>
      }
    </div>
  )
})

@observer
class bindWeChat extends Component {
  constructor (props) {
    super(props)
    window.document.title = '绑定微信'
    this.vm = new BindWeChatVM(props)
  }
  render () {
    return (
      <div>
        <BindWeChatList vm={this.vm} />
      </div>
    )
  }
}

export default bindWeChat
